<template>
  <div>
    <n-card :bordered="false" class="fromCard">
      <BasicForm
        @register="register"
        @submit="handleSubmit"
        @reset="handleReset"
        :Toption="orgStatus"
      >
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
    </n-card>
    <n-card :bordered="false" class="tableCard">
      <BasicTable
        :bordered="false"
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        :actionColumn="actionColumn"
        ref="actionRef"
        :scroll-x="1090"
      >
        <template #tableTitle>
          <div
            style="
              border: 2px solid #2d8cf0;
              height: 32px;
              margin-right: 5px;
              background-color: #2d8cf0;
            "
          ></div>
          <p style="font-size: 15px">充值查询表格</p>
        </template>
      </BasicTable>
    </n-card>
  </div>
</template>

<script lang="ts" setup>
import { h, reactive, ref, onMounted, defineComponent } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicTable, TableAction } from '@/components/Table';
import { BasicForm, useForm } from '@/components/Form/index';
import { getTableList } from '@/api/table/list';
import { columns } from './columns';
import { PlusOutlined } from '@vicons/antd';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { rechargeList } from '@/api/recharge/list';
import formatDate from '@/utils/timestamp';
import { createStorage } from '@/utils/Storage';
const Storage = createStorage({ storage: localStorage });

let authorityJson = Storage.get('OPERATORLIST');
const authority = JSON.parse(authorityJson);

function reloadTable() {
  actionRef.value.reload();
}

// 表单查询按钮
function handleSubmit(values: Recordable) {
  reloadTable();
}

// 表单重置按钮
function handleReset(values: Recordable) {
  console.log(1);

  rechargeListParms.value.rcNo = '';
  rechargeListParms.value.rechargeMode = '';
  rechargeListParms.value.txStatus = '';
  rechargeListParms.value.startDate = '';
  rechargeListParms.value.endDate = '';
  reloadTable();
}

const rechargeListParms = ref({
  rcNo: '',
  rechargeMode: '',
  txStatus: '',
  startDate: '',
  endDate: '',
  pageNum: 1,
  pageSize: 10,
});

// 获取充值记录列表
const loadDataTable = async (res) => {
  rechargeListParms.value.pageNum = res.page;
  rechargeListParms.value.pageSize = res.pageSize;
  let data = await rechargeList(rechargeListParms.value);
  data.data.body.list.forEach((val) => {
    // val.createdTime = formatDate(new Date(val.createdTime));
    val.exgRate = '1:' + val.exgRate;
    if (val.rechargeMode == '00') {
      val.rechargeMode = '法币银行账户';
    } else {
      val.rechargeMode = '链钱包';
    }
    if (val.status == '0') {
      val.status = '申请中';
    } else if (val.status == '1') {
      val.status = '成功';
    } else if (val.status == '2') {
      val.status = '失败';
    } else {
      val.status = '无';
    }
  });
  let datas = {
    list: data.data.body.list,
    page: res.page,
    pageSize: res.pageSize,
    pageCount: Math.ceil(data.data.body.total / res.pageSize),
  };
  console.log(data);
  console.log(datas);
  return datas;
};

const schemas = [
  {
    field: 'makeDate',
    component: 'NDatePicker',
    label: '充值日期：',
    componentProps: {
     closeOnSelect:true,
      updateValueOClose:true,
      type: 'daterange',
      actions:['confirm'],
      clearable:false,
      onUpdateValue: (e: any) => {
        console.log(e[0]);
        rechargeListParms.value.startDate = e[0];
        rechargeListParms.value.endDate = e[1] + 1000*60*60*24 - 1;
      },
    },
  },
  {
    field: 'txStatus',
    component: 'NSelect',
    label: '交易状态：',
    componentProps: {
      placeholder: '请选择',
      options: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '申请中',
          value: 0,
        },
        {
          label: '成功',
          value: 1,
        },
        {
          label: '失败',
          value: 2,
        },
      ],
      onUpdateValue: (e: any) => {
        console.log(e);
        rechargeListParms.value.txStatus = e;
      },
    },
  },
  {
    field: 'rechargeMode',
    component: 'NSelect',
    label: '充值方式：',
    componentProps: {
      placeholder: '请选择',
      options: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '法币银行账户',
          value: '00',
        },
        {
          label: '链钱包',
          value: '01',
        },
      ],
      onUpdateValue: (e: any) => {
        console.log(e);
        rechargeListParms.value.rechargeMode = e;
      },
    },
  },
  {
    field: 'rcNo',
    component: 'NInput',
    label: '充值交易流水：',
    componentProps: {
      maxlength: 20,
      placeholder: '请输入充值交易流水',
      onInput: (e: any) => {
        console.log(e);
        rechargeListParms.value.rcNo = e;
      },
    },
  },
];

const router = useRouter();
const formRef: any = ref(null);
const message = useMessage();
const actionRef = ref();

const [register, {}] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
  labelWidth: 80,
  schemas,
});
</script>

<style lang="less" scoped>
.fromCard {
  margin-top: 12px;
  border: 1px solid rgb(226, 229, 229);
  margin-bottom: 8px;
}
.tableCard {
  border: 1px solid rgb(226, 229, 229);
}
</style>

function reloadTable() {
  throw new Error('Function not implemented.');
}
